<template>
  <div class="group_manage_frame">
    <div class="group_left_area">
  <div v-for="v in roomList" 
  style="height:15%;padding: 10% 10% 5% 10%;width:100%" 
  :key="v.roomId" class="manage_item" 
  @click="select(v.roomId)"
  :class="{'activeBack':v.roomId==selected}"
  >
                 {{v.roomName}} 
      </div>
        </div>
  <div class="group_right_area">
    <el-row style="margin-top:5%">
        <el-col :span="24">
            <el-input placeholder="请输入内容" v-model="input_val" class="input-with-select">
        <el-select v-model="select_op" slot="prepend" placeholder="请选择">
        <el-option label="用户名" value="1"></el-option>
        <el-option label="用户ID" value="2"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
    </el-input>
        </el-col>
    </el-row>
    <ul class="infinite-list"  style="overflow:auto">
    <li v-for="i in userList"  class="infinite-list-item" :key="i.userId">
        <el-descriptions class="margin-top" title="用户信息" :column="1" :size="'mini'" border style="margin-top:2%">
    <template slot="extra">
      <el-button type="primary" size="mini" :disabled="i.userId==user.userId" @click="inviteUser(i.userId)">邀请进入</el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      {{i.userName}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
       用户ID
      </template>
      {{i.userId}}
    </el-descriptions-item>
  </el-descriptions>
    </li>
  </ul>
  </div>
   
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
name:'GroupManage',
data(){
return {
    roomList:[],
    selected:null,
    input_val:'',
    select_op:'1',
    userList:[]
}
},
computed:{
    ...mapState('userAbout',['user','token'])
},
mounted(){
    this.$pubsub.subscribe('reloadManage',this.__load)
   this.__load()
},
methods:{
    __load(){
        this.$basicAxios(this.$ms.getOwnerRoom(this.token),(resp)=>{
            this.roomList =  resp.data.data
        })
    }
    ,
    select(id){
        this.selected = id
    },
    searchUser(){
        this.$basicAxios(this.$ms.searchUserByName(this.input_val,this.token),(resp)=>{
            this.userList = resp.data.data
        })
    },
    inviteUser(id){
        if(this.selected)  this.$basicAxios(this.$websocket.invite_user_to_room(this.selected,id,this.token),(resp)=>{
            this.notify('success','[ success ] 邀请用户成功 请等待用户同意')
        })
    }
}
}
</script>

<style>
.group_manage_frame{
    width:100%;
    height:100%
}
.group_left_area{
    width:45%;
    padding-right: 3%;
    height:100%;
    float: left;
    background: #efefef;
    overflow-y: scroll;
}
.group_right_area{
    width:55%;
    height:100%;
    float: left;
    overflow-y:scroll;
}
.manage_item:hover{
    background-color: #409EFF;
}
.activeBack{
    background-color: #409EFF;
}
</style>